<template>
  <div class="title-box">
    <img src="@/assets/public_images/title.png">
    <p><span class="dashboard-title">{{ title }}</span><span v-if="!isConf">{{ subTitle }}</span></p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'DashboardTitle',
  props: {
    ptitle: {
      type: String,
      required: false,
      default: '系统配置'
    }
  },
  data() {
    return {
      isConf: true,
      subTitle: '信息化系统',
      mainTitle: ''
    }
  },
  computed: {
    ...mapGetters([
      'title'
    ])
  },
  created() {
    this.getTitle()
  },
  methods: {
    getTitle() {
      // 当前页面路径
      const path = this.$route.path
      this.isConf = path === '/configuration'
      if (this.isConf) {
        this.mainTitle = this.ptitle
      } else {
        this.mainTitle = this.$Cookies.get('currentTitle') === undefined ? '' : this.$Cookies.get('currentTitle')
        this.$store.dispatch('configInfo/changeTitle', this.mainTitle)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.title-box{
        width: 100%;
      margin-left: 0;
    height: 50px;
    position: absolute;
    top: $navBarHeight;
    img{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    p{
        display: inline-block;
        margin: 0;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        span {
        line-height: 50px;
        font-size: 30px;
        font-weight: bold;
        letter-spacing: 2px;
        text-shadow: 1px 1px 0px rgb(0 149 140), 1px 2px 0px rgb(0 149 160), 1px 3px 0px rgb(0 149 180), 1px 4px 0px rgb(0 149 200), 1px 5px 0px rgb(0 149 227);
    }
    }
}

 .openSidebar{
   .title-box{
    width: calc(100% - #{$sideBarWidth});
    margin-left: $sideBarWidth;
   }
 }
 .hideSideBar{
   .title-box{
      width: 100%;
      margin-left: 0;
   }
 }
</style>
